<template>
<el-container>
  <el-container>
  <el-header height="150px">
       <div style="background-color: #00ffff">
            <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                  background-color="#808080"
                  text-color="#fff"
                  active-text-color="#77ff77">
                  <el-menu-item index="1"><router-link to="/EstablishProj" >我要立项！</router-link></el-menu-item>
                  <el-submenu index="2">
                    <template #title>查看项目</template>
                    <el-menu-item index="2-1"><router-link to="/MyProj" >我的科研项目</router-link></el-menu-item>
                    <el-menu-item index="2-2"><router-link to="/PermittedProj" >浏览正在进行中项目</router-link></el-menu-item>
                    <el-submenu index="2-3">
                       <template #title>申请加入项目</template>
                       <el-menu-item index="2-3-1"><router-link to="/MyApply" >查看我的申请</router-link></el-menu-item>
                    </el-submenu>
                        <el-menu-item index="2-4"><router-link to="/Leader">发给我的申请</router-link></el-menu-item>
                  </el-submenu>
                </el-menu>
        </div>
  </el-header>
  <el-main style="border: 1px solid #eee;" id="bg">
  <div align="center">
     <el-input
           v-model="searchValue" size="mini" clearable
           placeholder="可根据项目名或申请原因进行搜索" style="width:300px"></el-input>
         <el-button type="primary" size="mini" @click="doFilter">搜索</el-button>
         <el-button type="primary" size="mini" @click="loadData">还原数据</el-button>
   <el-table
    :data="MyApplyData"
    max-height="100%"
    style="width: 100%">
    <el-table-column prop="0" align="center" label="项目名" width="120px" >
    </el-table-column>
    <el-table-column prop="1" align="center" label="申请人" width="120px">
        </el-table-column>
    <el-table-column prop="2" align="center" label="申请原因" width="300px">
        </el-table-column>
     <el-table-column prop="3" :formatter="stateFormatter" align="center" label="当前状态" width="180px">
     </el-table-column>
   </el-table>
     <el-pagination
     background
     layout="prev, pager, next"
     :total="total">
   </el-pagination>
  </div>
  </el-main>
  </el-container>
  </el-container>
</template>

<script>
import http from '../utils/req.js'
export default {
  name:'MyApply',
  data(){
    return{
      MyApplyData:[],
      username:'',
      searchValue:'',
      filteredData: [],
      total:0,
    }
  },
  mounted: function () {
    this.loadData();
  },
  methods:{
    loadData(){
      var _this = this;
      http.post('/MyApply',{
        username:sessionStorage.getItem("username")
      })
      .then(resp=>{
        if (resp.data.code === 200) {
          _this.MyApplyData = resp.data.data;
          this.total=resp.data.data.length;
        }
      });
      this.username=sessionStorage.getItem("username");
    },
    stateFormatter(row, column){
     switch(row['3']){
       case 0:
        return '不通过';
        break;

       case 1:
        return '通过';
        break;

       case 2:
        return '待处理';
        break;

       default:
        return '未知';
      }
    },
    doFilter() {
      this.filteredData = [];
      this.MyApplyData.filter((item)=>{
        if('0' in item || '2' in item){
          if (item['0'].indexOf(this.searchValue) > -1
            || item['2'].indexOf(this.searchValue) > -1) {
            this.filteredData.push(item);
            this.total=this.filteredData.length;
          }
        }
      })
     this.MyApplyData=this.filteredData;
    }
  }
}
</script>
